<template>
    <div class="not-found">
      <el-row type="flex" justify="center" align="middle" class="not-found-container">
        <el-col :span="12" class="text-center">
          <h1>404</h1>
          <p>对不起，您访问的页面不存在。</p>
          <el-button type="primary" @click="goHome">返回首页</el-button>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  const goHome = () => {
    router.push('/');
  };
  </script>
  
  <style scoped>
  .not-found {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }
  
  .not-found-container {
    text-align: center;
  }
  
  .not-found h1 {
    font-size: 10rem;
    margin-bottom: 0;
  }
  
  .not-found p {
    font-size: 1.5rem;
    margin-top: 0;
  }
  
  .not-found .el-button {
    margin-top: 1rem;
  }
  </style>
  